<template>
  <div>
    <a-button type="primary" @click="handleAdd" style="margin-bottom: 10px;">新增</a-button>
    <a-table :columns="columns" :data-source="tableData" :pagination="false" bordered>
      <template
        v-for="col in ['actionCode', 'actionName']"
        :slot="col"
        slot-scope="text, record, index"
      >
        <div :key="col">
          <a-input
            v-if="record.editable"
            style="margin: -5px 0"
            :value="text"
            @change="e => handleChange(e.target.value, record.actionId, col)"
          />
          <template v-else>
            {{ text }}
          </template>
        </div>
      </template>
      <template slot="operation" slot-scope="text, record, index">
        <div class="editable-row-operations">
          <span v-if="record.editable">
            <a @click="() => save(record.actionId)">确定</a>
          </span>
          <span v-else>
            <a :disabled="editingactionId !== ''" @click="() => edit(record.actionId)">编辑</a>
            <a-popconfirm
              v-if="editingactionId !== '' ||editingactionId!=null"
              title="确认删除吗?"
              @confirm="() => onDelete(record.actionId)"
            >
              <a href="javascript:;">删除</a>
            </a-popconfirm>
          </span>
        </div>
      </template>
    </a-table>
  </div>
</template>
<script>
  export default {
    name: 'MenusAuthBtnList',
    data: function() {
      return {
        cacheData: [],
        tableData: [],
        menuId: null,
        columns: [
          {
            title: '按钮编码',
            dataIndex: 'actionCode',
            width: '40%',
            scopedSlots: { customRender: 'actionCode' }
          },
          {
            title: '按钮名称',
            dataIndex: 'actionName',
            width: '40%',
            scopedSlots: { customRender: 'actionName' }
          },
          {
            title: 'operation',
            dataIndex: 'operation',
            scopedSlots: { customRender: 'operation' }
          }],
        editingactionId: ''
      }
    },
    created() {
    },
    methods: {
      onDelete(actionId) {
        const me = this
        const menuId = me.menuId
        const newData = [...this.tableData]
        const target = newData.filter(item => actionId === item.actionId)[0]
        this.http.post(this, {
          url: me.api.menu.removeAuthBtn,
          data: target,
          success: (meta, msg) => {
            me.$message.destroy()
            me.$message.success('操作成功')
            me.setData({ 'menuId': menuId })
          }
        })
      },
      handleAdd() {
        const me = this
        const newRecord = {
          'isPersist': 1,
          'menuId': me.menuId,
          'priority': 0,
          'serviceId': 'meida-base-provider',
          'status': 1,
          'actionId': 'UID' + new Date().toLocaleString(),
          'actionCode': '',
          'actionName': ''
        }
        this.tableData.push(newRecord)
        // this.cacheData.push(newRecord);
      },
      setData(params) {
        const me = this
        me.menuId = params.menuId
        this.http.get(this, {
          url: me.api.menu.loadAuthBtnList,
          data: {
            menuId: params.menuId
          },
          success: (meta, datas) => {
            me.cacheData = datas.map(item => ({ ...item }))
            me.tableData = me.cacheData
          }
        })
      },
      handleSubmit(callback) {

      },
      handleChange(value, actionId, column) {
        const newData = [...this.tableData]
        const target = newData.filter(item => actionId === item.actionId)[0]
        if (target) {
          target[column] = value
          this.tableData = newData
        }
      },
      edit(actionId) {
        const newData = [...this.tableData]
        const target = newData.filter(item => actionId === item.actionId)[0]
        this.editingactionId = actionId
        if (target) {
          target.editable = true
          this.tableData = newData
        }
      },
      save(actionId) {
        const me = this
        const menuId = me.menuId
        const newData = [...this.tableData]
        const newCacheData = [...this.cacheData]
        const target = newData.filter(item => actionId === item.actionId)[0]
        const targetCache = newCacheData.filter(item => actionId === item.actionId)[0]
        if (target && targetCache) {
          delete target.editable
          this.tableData = newData
          Object.assign(targetCache, target)
          this.cacheData = newCacheData
        }
        this.editingactionId = ''
        //判断是新增的按钮还是原有的按钮
        if (actionId.indexOf('UID') != -1) {
          this.http.post(this, {
            url: me.api.menu.addAuthBtn,
            data: target,
            success: (meta, msg) => {
              me.$message.destroy()
              me.$message.success('操作成功')
              me.setData({ 'menuId': menuId })
            }
          })
        } else {
          this.http.post(this, {
            url: me.api.menu.updateAuthBtn,
            data: target,
            success: (meta, msg) => {
              me.$message.destroy()
              me.$message.success('操作成功')
              me.setData({ 'menuId': menuId })
            }
          })
        }
      },
      cancel(actionId) {
        const newData = [...this.tableData]
        const target = newData.filter(item => actionId === item.actionId)[0]
        this.editingactionId = ''
        if (target) {
          Object.assign(target, this.cacheData.filter(item => actionId === item.actionId)[0])
          delete target.editable
          this.tableData = newData
        }
      }
    }
  }
</script>
<style scoped>
  .editable-row-operations a {
    margin-right: 8px;
  }
  .editable-add-btn {
    margin-bottom: 8px;
  }
</style>
